<div class="view-container-{{direction}}">

	<span ng-if="direction == 't'">
        <div class="row col-xs-12 mt10" ng-click="next({url:url, params:params})">
            <img class="img-circle" src={{img}} alt="description" style=" width: 110%;
            margin-left: -10px;"/>
        </div>
        <div class="row col-xs-12 view-title title-cn mt15">
            <div class="text-center" ng-bind="titleCn" style="width: 100%;
            color: rgb(44, 152, 212);font-size: 18px;"></div>
        </div>
        <div class="row col-xs-12 view-title title-en mt5">
            <div class="text-center" ng-bind="titleEn" style="width: 100%;
            color: rgb(44, 152, 212);font-size: 6px;"></div>
        </div>
    </span>

	<span class="wrap" ng-if="direction == 'f'" style="text-align: center;
            color: rgb(44, 152, 212);
            font-size: 25px;">
        <img class="img-circle mt30" src={{img}} alt="description" ng-click="next({url:url, params:params})" style="width: 100px;
            height: auto; margin-left:20px;
            vertical-align: middle;"/>
			<span class="mt20" style="display: inline-block;
            vertical-align: middle;
            padding: 20px 0;">{{titleCn}}<br/>
				{{titleEn}}
            </span>
	</span>

	<style type="text/css">
		.view-container-t {
			margin-left: 5px;
			width: 90%;
			height: 320px;
			padding: 3px;
			color: #FFF;
			font-size: 20px;
			border: 2px solid rgb(44, 152, 212);
			border-radius: 10px;
			/* Old Firefox */
			-moz-border-radius: 25px;
		}

		.view-container-f {
			margin-left: 5%;
			width: 90%;
			height: 180px;
			padding: 3px;
			color: #FFF;
			font-size: 20px;
			border: 2px solid rgb(44, 152, 212);
			border-radius: 10px;
			-moz-border-radius: 25px;
		}

		.img-circle {
			width: 150px;
			height: 150px;
		}

	</style>

</div>